<template>
  <view class="page">
    <view class="order-box" v-if="order">
      <!-- 订单头部信息（订单状态） -->
      <orderHeader
        :order="order"
        @handleOrderTopBtn="handleOrderTopBtn"
      ></orderHeader>

      <view class="page-container">
        <!-- 用户信息及地址 -->
        <!-- <userInfo :order="order"></userInfo> -->

        <!-- 店铺及商品信息 -->
        <goodsDetail
          :orderitem="order"
          @buyAgain="buyAgain"
          @orderRefund="orderRefund"
        ></goodsDetail>

        <!-- 订单明细及金额明细 -->
        <orderSummary :orderitem="order"></orderSummary>
      </view>
    </view>
  </view>
</template>

<script>
import goodsDetail from "../components/face-pay/orderDetail/goods-detail.vue";
import orderSummary from "../components/face-pay/orderDetail/order-summary.vue";
import orderHeader from "../components/face-pay/orderDetail/order-header.vue";

export default {
  components: {
    // userInfo,
    goodsDetail,
    orderSummary,
    orderHeader,
  },
  data() {
    return {
      order: null,
    };
  },
  onLoad(t) {
    this.routeOptions = t;
    this.getOrderInfo();
  },
  watch: {},
  methods: {
    // 这里调用接口获取一次支付组件需要的支付类型参数及templateID
    getOrderInfo() {
      this.$allrequest.facePay
        .orderDetail({
          id: this.routeOptions.id,
          type: this.routeOptions.type,
        })
        .then((res) => {
          if (!res.code && res.data) {
            this.order = res.data;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f2;
  .order-box {
    background-color: #f2f2f2;
  }
  .page-container {
    position: relative;
    z-index: 10;
    top: -24rpx;
  }
}

.flex-grow-1 {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
view {
  font-size: 32rpx;
}
.order-status {
  padding: 20rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  background: #f29100;
  color: #ffffff;
}
.order-model {
  background: #ffffff;
  padding: 20rpx;
  margin-bottom: 16rpx;
}
.order-address > view {
  background: #ffffff;
  padding: 10rpx 0;
}
.order-offline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > view > view {
    padding: 8rpx;
  }
}
.order-info > view {
  padding: 8rpx;
}
.order-price > view {
  padding: 6rpx;
}
.goods-item {
  display: flex;
  .goods-img {
    width: 200rpx;
    height: 200rpx;
    overflow: hidden;
    > image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .goods-info {
    width: 550rpx;
    padding-left: 16rpx;
    box-sizing: border-box;
  }
}

.refund-btn {
  float: right;
  height: 60rpx;
  border: 1rpx solid #bbb;
  padding: 0 30rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  line-height: 60rpx;
}

.refund-text {
  float: right;
  display: inline-block;
  margin-top: 20rpx;
}
</style>
